<template>
  <div class="container">
    <Header
      :showRefresh="false"
      @refresh="() => { }"
    />
    <div class="page-main">
      <div class="page-main-query all-search">
        <FilterBar
          :showBack="true"
          @route="$router.back"
        />
      </div>

      <div class="page-main-step">
        <ProgressBar :active="step"></ProgressBar>
      </div>

      <div
        class="page-main-content"
        v-loading="loading.page"
      >
        <keep-alive>
          <component
            ref="componentRef"
            :is="currentStepComponent"
            v-model="data"
          />
        </keep-alive>
      </div>

      <div class="page-main-navigation">
        <el-button
          v-if="step !== 1"
          @click="handleStep(false)"
        >
          上一步
        </el-button>
        <el-button
          v-loading="loading.btn"
          type="primary"
          @click="handleStep"
        >
          下一步
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, reactive, computed, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { getDetail, create, update } from "@/api/service-event";
import Header from "@/components/Header.vue";
import FilterBar from "@/components/FilterBar.vue";
import ProgressBar from "./components/ProgressBar.vue";
import BaseForm from "./components/BaseForm.vue";
import FlowEdit from "./components/FlowEdit.jsx";

export default defineComponent({
  name: "MeansServiceEventEdit",
  components: {
    Header,
    ProgressBar,
    FilterBar,
    BaseForm,
    FlowEdit,
  },
  setup (props, { emit }) {
    // 杂项
    const componentRef = ref(null)
    const route = useRoute();
    const router = useRouter();
    const loading = reactive({
      page: false,
      btn: false,
    });

    // 步骤条
    const step = ref(1);
    const currentStepComponent = computed(() => {
      return step.value === 1 ? "BaseForm" : "FlowEdit";
    });

    // 数据
    const data = ref({ activated: false });
    const getData = async () => {
      loading.page = true;
      const res = await getDetail(route.params.id);
      loading.page = false;
      if (res.status === 200) {
        data.value = res.data;
      } else {
        ElMessage.warning(res.message);
      }
    };

    onMounted(() => {
      if (route.params.id) {
        getData();
      }

    });

    /**
     * 步骤操作
     * @param {bool}isNext true下一步，false上一步
     */
    const handleStep = async (isNext = true) => {
      if (isNext) {
        if (step.value < 2) {
          const formPass = await componentRef.value.validateForm()
          if (formPass) {
            step.value++;
          }
        } else {
          handleSubmit();
        }
      } else {
        if (step.value > 1) {
          step.value--;
        }
      }
    };

    // 保存数据
    const handleSubmit = async () => {
      loading.btn = true;
      let promise;
      if (route.params.id) {
        promise = update(route.params.id, { ...data.value });
      } else {
        promise = create({ ...data.value });
      }
      const res = await promise.catch((e) => {
        loading.btn = false;
      });

      loading.btn = false;
      if (res.status === 200) {
        ElMessage.success('保存成功')
        router.back();
      } else {
        ElMessage.warning(res.message);
      }
    };

    return {
      componentRef,
      loading,
      step,
      currentStepComponent,
      data,
      handleStep,
    };
  },
});
</script>

<style lang="scss" scoped>
.container {
  .page-main {
    display: flex;
    flex-direction: column;

    .page-main-step {
      margin: 10px 0;
    }

    .page-main-content {
      flex: 1;
    }

    .page-main-navigation {
      padding: 20px;
      height: 60px;
      text-align: right;
    }
  }
}
</style>